<template>
    <div>
        <div style="font-size:18px;">店铺列表</div>
        <hr>
        <br>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm" style="float: left;">
            <el-form-item prop="phone" class="input_edit">
                <el-input v-model="ruleForm.responsiblePhone" placeholder="学校"></el-input>
            </el-form-item>
            <el-form-item prop="phone" class="input_edit">
                <el-input v-model="ruleForm.responsiblePhone" placeholder="责任人手机"></el-input>
            </el-form-item>
            <el-form-item prop="name" class="input_edit">
                <el-input v-model="ruleForm.name" placeholder="店名"></el-input>
            </el-form-item>
            <el-form-item prop="rname" class="input_edit">
                <el-input v-model="ruleForm.responsibleName" placeholder="责任人姓名"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="state" class="input_edit">
                <el-select v-model="ruleForm.state" placeholder="审核状态" clearable @change="selectChange">
                    <el-option v-for="item in roleOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item prop="able" class="input_edit">
                <el-select v-model="status" placeholder="账户状态" clearable @change="selectChange">
                    <el-option v-for="item in ableOptions" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            
        </el-form>
        <div class="login-btn" style="float: left">
                <el-button type="primary" @click="search()">搜索</el-button>
<!--             <el-button @click="check()" >审核</el-button>
            <el-button type="danger" @click="setRecommend(0)" >取消推荐</el-button>
            <el-button @click="setRecommend(1)" >设为推荐</el-button> -->
            <el-button type="danger" @click="setAble(-1)" >禁用</el-button>
            <el-button @click="setAble(0)" >启用</el-button>
            <!-- <el-button @click="exportShop()" >导出桌位图片</el-button> -->
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80px"></el-table-column>
            <el-table-column prop="name" label="店铺名" width="190px"></el-table-column>
            <el-table-column prop="responsibleName" label="责任人姓名" width="120px"></el-table-column>
            <!-- <el-table-column label="店铺logo" width="150px">
                <template scope="scope">
                    <img :src="scope.row.shopLogo" width="100" height="100">
                </template>
            </el-table-column> -->
            <el-table-column prop="responsiblePhone" label="责任人手机" width="130px"></el-table-column>
            <el-table-column prop="address" label="地址" width="200px"></el-table-column>
            <!-- <el-table-column prop="createTime" label="创建时间" :formatter="formatterCreateDate" width="160px"></el-table-column> -->
            <!-- <el-table-column label="审核" width="100px">
                <template scope="scope">
                    <div v-if="scope.row.shState == '0'">未审核</div>
                    <div v-if="scope.row.shState == '1'">审核通过</div>
                    <div v-if="scope.row.shState == '2'">审核驳回</div>
                </template>
            </el-table-column> -->
            <el-table-column label="状态" width="80px">
                <template scope="scope">
                    <div v-if="scope.row.status == '0'">正常</div>
                    <div v-if="scope.row.status == '-1'">禁用</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="400px">
                <template scope="scope">
                    <el-button size="small" @click="detail(scope.row)" >详情</el-button>
                    <!-- <el-button size="small" @click="resetForm2();openCheckWin(scope.row.id);" v-if="scope.row.shState == '0'"  >审核</el-button> -->
                    <el-button type="danger" size="small" @click="setAble(-1,scope.row.id,scope.row,scope.$index)" v-if="scope.row.status == '0'"  >禁用</el-button>
                    <el-button size="small" @click="setAble(0,scope.row.id,scope.row,scope.$index)" v-if="scope.row.status == '-1'" >启用</el-button>
                    <!-- <el-button type="danger" size="small" @click="setRecommend(0,scope.row.id,scope.row,scope.$index)" v-if="scope.row.shState == '1' && scope.row.isRecommend == '1'&&scope.row.isDisbaled == '0'"  >取消推荐</el-button>
                    <el-button size="small" @click="setRecommend(1,scope.row.id,scope.row,scope.$index)" v-if="scope.row.shState == '1' && scope.row.isRecommend == '0'&&scope.row.isDisbaled == '0'" >推荐</el-button>
                    <el-button size="small" @click="exportShop(scope.row.id,scope.row,scope.$index)" v-if="scope.row.shState == '1' && scope.row.isDisbaled == '0' ">导出桌位图片</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- <el-dialog title="审核店铺" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm2" label-width="100px">
                <el-form-item label="审核">
                    <el-select v-model="ruleForm2.type" placeholder="">
                        <el-option label="审核通过" value="1" checked></el-option>
                        <el-option label="审核不通过" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手续费(%)" v-if="ruleForm2.type == 1">
                    <el-input type="number" v-model="ruleForm2.cost" @change="handleCost" :min="1" :max="10"></el-input>
                    <div style="color:#ff2209">注:手续费费率在0~10%之间且最多两位小数</div>
                </el-form-item>
                <el-form-item label="审核理由">
                    <el-input type="textarea" v-model="ruleForm2.content" auto-complete="off" value="符合要求"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveCheck()">确 定</el-button>
            </div>
        </el-dialog> -->
        <!--店铺详情-->
        <el-dialog title="店铺详情" :visible.sync="dialogFormVisibleDetail">
            <el-form :model="ruleForm3">
                 <el-form-item label="首页图片" class="input_logo">
                    <img width=300 height=200 :src="ruleForm3.imgs" />
                </el-form-item>
                <el-form-item label="店铺名称" class="input_edit">
                    <el-input v-model="ruleForm3.name" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item label="注册城市" class="input_edit">
                    <el-input v-model="ruleForm3.cityname" readonly></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="创建时间" class="input_edit">
                    <el-input v-model="ruleForm3.createTime" readonly></el-input>
                </el-form-item> -->
                <el-form-item  label="店铺电话" class="input_edit">
                    <el-input v-model="ruleForm3.shopPhone" readonly></el-input>
                </el-form-item>
                <div style="clear:both;"></div>
                <el-form-item label="店铺地址">
                    <el-input v-model="ruleForm3.address" readonly></el-input>
                </el-form-item>
                <div style="clear:both;"></div>
                <!-- <el-form-item label="详细地址" >
                    <el-input v-model="ruleForm3.realAddress" readonly></el-input>
                </el-form-item> -->
                <div style="clear:both;"></div>
                <el-form-item  label="店铺简介" >
                    <!-- <el-input type="textarea" v-model="ruleForm3.detail" readonly></el-input> -->
                    <div style="clear:both;"></div>
                    <div id="detail" v-html="ruleForm3.detail" style="border: 1px solid #bfcbd9;border-radius: 4px;min-height:40px;"></div>
                </el-form-item>
                <div style="clear:both;"></div>
                <el-form-item label="责任人身份证" class="input_edit">
                    <el-input v-model="ruleForm3.card" readonly></el-input>
                </el-form-item>
                <el-form-item label="责任人姓名" class="input_edit">
                    <el-input v-model="ruleForm3.responsibleName" readonly></el-input>
                </el-form-item>
                <el-form-item label="责任人电话" class="input_edit">
                    <el-input v-model="ruleForm3.responsiblePhone" readonly></el-input>
                </el-form-item>
<!--                 <el-form-item label="商业区域" class="input_edit">
                    <el-input v-model="ruleForm3.area" readonly></el-input>
                </el-form-item> -->
                <!-- <el-form-item label="人均消费" class="input_edit">
                    <el-input v-model="ruleForm3.avgComsump" readonly></el-input>
                </el-form-item>
                <el-form-item label="协议编号" class="input_edit">
                    <el-input v-model="ruleForm3.agreementCode" readonly></el-input>
                </el-form-item>
                <div style="clear:both;"></div>
                <el-form-item v-if="shState != '0'" label="审核意见" >
                    <el-input type="textarea" v-model="ruleForm3.shOpinion" readonly></el-input>
                </el-form-item> -->
                <div style="clear:both;"></div>
                <!-- <el-form-item label="审核状态" class="input_edit">
                    <el-select v-model="ruleForm3.shState" placeholder="" disabled>
                        <el-option key="0" label="待审核" value="0"></el-option>
                        <el-option key="1" label="审核通过" value="1"></el-option>
                        <el-option key="2" label="审核驳回" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="shState == '1'" label="审核管理员" class="input_edit">
                    <el-input v-model="ruleForm3.approvalUserName" readonly></el-input>
                </el-form-item> -->
                <el-form-item  label="是否禁用" class="input_edit">
                    <el-select v-model="ruleForm3.status" placeholder="" disabled>
                        <el-option key="0" label="未禁用" value="0"></el-option>
                        <el-option key="-1" label="已禁用" value="-1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="收藏数" class="input_edit">
                    <el-input v-model="ruleForm3.collectionNum" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item  label="星星数" class="input_edit">
                    <el-input v-model="ruleForm3.starNum" readonly></el-input>
                </el-form-item> -->
                <el-form-item  label="店铺等级" class="input_edit">
                    <el-input v-model="ruleForm3.level" readonly></el-input>
                </el-form-item>
                <!-- <el-form-item v-if="shState == '1'" label="是否推荐" class="input_edit">
                    <el-select v-model="ruleForm3.isRecommend" placeholder="" disabled>
                        <el-option key="0" label="未推荐" value="0"></el-option>
                        <el-option key="1" label="已推荐" value="1"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- <el-form-item v-if="shState == '1'" label="提现手续费" class="input_edit">
                    <el-input v-model="ruleForm3.txDiscountRate" readonly></el-input>
                </el-form-item> -->
                <!-- <div style="clear:both;"></div>
                <el-form-item label="身份证正面" class="input_card">
                    <img width=100%  :src="ruleForm3.cardFace" />
                </el-form-item>
                <el-form-item label="身份证反面" class="input_card">
                    <img width=100% :src="ruleForm3.cardBack" />
                </el-form-item>
                <div style="clear:both;"></div>
                <el-form-item label="营业执照" class="input_logo_two">
                    <!-- <img width=600 height=400 :src="ruleForm3.businessLicense" /> -->
                <!-- img style="max-width100%" :src="ruleForm3.businessLicense" />
                </el-form-item>
                <el-form-item label="卫生许可证" class="input_logo_two"> -->
                    <!-- <img width=600 height=400 :src="ruleForm3.healthPermit" /> -->
                   <!--  <img style="max-width100%" :src="ruleForm3.healthPermit" />
                </el-form-item> -->

            </el-form>
            <div style="clear:both;"></div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisibleDetail = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import $ from 'jquery';

    export default {
        data() {
            return {
                tableData: [],
                cur_page: 1,
                page_size: 10,
                total: 0,
                multipleSelection: [],

                ruleForm: {
                    phone: '',
                    name: '',
                    rname: '',
                    state: '',
                    able: '',
                },
                status:'',
                ruleForm2: {
                    type: '',
                    cost:'1',
                    content: ''
                },
                ruleForm3:{

                },
                roleOptions: [{
                    id: '0',
                    name: '未审核'
                }, {
                    id: '1',
                    name: '审核通过'
                }, {
                    id: '2',
                    name: '审核驳回'
                }, ],
                ableOptions: [{
                    id: '0',
                    name: '正常'
                }, {
                    id: '-1',
                    name: '禁用'
                }, ],
                rules: {
                    username: [],
                },
                searchUrl: "/shop/list",
                searchData: {},

                dialogFormVisible: false,
                checkSingleValue: '',

                dialogFormVisibleDetail:false,

                shState:0

            };
        },
        created() {
            var self = this;
            self.getData();
        },
        methods: {
            search() {
                this.cur_page = 1;
                this.getData();
            },
            selectChange(e) {
                this.getData();
            },
            handleCurrentChange(val) { //翻页
                this.cur_page = val;
                this.getData();
            },
            handleSizeChange(val) { //每页数量
                this.page_size = val;
                this.getData();
            },
            getData() {
                let self = this;
                var data = self.searchData;
                data.pageSize = self.page_size
                data.pageNumber = self.cur_page;
                data.param = new Object();
                data.param.responsiblePhone = self.ruleForm.responsiblePhone;
                data.param.name = self.ruleForm.name;
                data.param.responsibleName = self.ruleForm.responsibleName;
                data.param.status = self.status;
                console.log(data)
                self.myajax(self.searchUrl, data, function(data) {
                    console.log(data)
                    self.tableData = data.data.list;
                    self.total = data.data.total;
                });
                /* this.$axios.post(self.$host+"/user/list",{page:self.cur_page,token:token}).then((res) => {
                 console.log(res.data);
                 //self.userData = res.data.data;
                 })*/
            },
            formatter(row, column) {
                return row.address;
            },
            formatterCreateDate(row, column) {
                var date = row.createTime;
                if (date == undefined) {
                    return "";
                }
                return new Date(date).format("yyyy-MM-dd h:m");
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.$message('编辑第' + (index + 1) + '行');
            },
            handleDelete(index, row) {
                this.$message.error('删除第' + (index + 1) + '行');
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            setAble(type, id) { //冻结解冻用户
                var self = this;
                if (type != 0 && type != -1) {
                    self.$notify({
                        title: '提示',
                        message: '传入类型不正确',
                        type: 'warning'
                    });
                    return;
                }
                var ids = new Array();
                if (id) {
                    ids.push(id);
                } else {
                    if (self.multipleSelection.length == 0) {
                        self.$notify({
                            title: '提示',
                            message: '请先选择',
                            type: 'warning'
                        });
                        return;
                    }
                    for (var k in this.multipleSelection) {
                        ids.push(this.multipleSelection[k].id);
                    }
                }
                self.$confirm('确定要' + (type == -1 ? "设置为禁用" : "启用") + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data = {
                        status: type,
                        ids: ids
                    };
                    console.log(data)
                    self.myajax("/shop/setAble", data, function(data) {
                        var code = data.code;
                        if (code == 2000) {
                            self.$notify({
                                title: '提示',
                                message: (type == 1 ? "设置为禁用" : "启用") + "成功",
                                type: 'success'
                            });
                        } else {
                            self.$notify({
                                title: '提示',
                                message: data.msg,
                                type: 'error'
                            });
                        }
                        self.getData();

                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            openCheckWin(id) {
                var self = this;
                if (!id) {
                    if (self.multipleSelection.length == 0) {
                        self.$notify({
                            title: '提示',
                            message: '请先选择',
                            type: 'warning'
                        });
                        return;
                    }
                }
                if (id) {
                    self.checkSingleValue = id;
                } else {
                    self.checkSingleValue = '';
                }
                self.dialogFormVisible = true;


            },
            handleCost(val){
                val=val+"";
                // if(val.indexOf(".")!=-1){
                //     val=val.substring(0,val.indexOf("."));
                // }
                this.ruleForm2.cost=val;

            },
            saveCheck() { //冻结解冻用户
                var self = this;
                var type = self.ruleForm2.type;
                var id = self.checkSingleValue;
                var content=self.ruleForm2.content;
                var zhengshu = new RegExp("^\\d+$");
                var xiaoshu = new RegExp("^\\d+[.]\\d{1,2}$");
                var cost=self.ruleForm2.cost;
                if (type && (type == 1 || type == '1')) {
                    if (isNaN(cost)) {
                        self.$notify({
                                title: '提示',
                                message: '请输入手续费',
                                type: 'warning'
                            });
                        return;
                    }
                    if (!zhengshu.test(cost) && !xiaoshu.test(cost)) {
                        self.$notify({
                                title: '提示',
                                message: '手续费费率在0~10之间且最多两位小数',
                                type: 'warning'
                            });
                        return;
                    }
                }
                var result = parseFloat(cost);
                if ( result > 10) {
                    self.$notify({
                            title: '提示',
                            message: '手续费费率最大10%',
                            type: 'warning'
                        });
                    return;
                }
                if ( !content ) {
                    self.$notify({
                            title: '提示',
                            message: '请输入审核理由',
                            type: 'warning'
                        });
                    return;
                }
                // if ( reslut < 0) {
                //     self.$notify({
                //             title: '提示',
                //             message: '手续费费率不能为负数',
                //             type: 'warning'
                //         });
                //     return;
                // }
                
                var ids = new Array();
                if (id) {
                    ids.push(id);
                } else {
                    if (self.multipleSelection.length == 0) {
                        self.$notify({
                            title: '提示',
                            message: '请先选择',
                            type: 'warning'
                        });
                        return;
                    }
                    for (var k in this.multipleSelection) {
                        ids.push(this.multipleSelection[k].id);
                    }
                }

                var data = {
                    type: type,
                    ids: ids,
                    content:content,
                    cost:cost
                };
                self.myajax("/shop/check", data, function(data) {
                    var code = data.code;
                    if (code == 2000) {
                        self.dialogFormVisible = false;
                        self.$notify({
                            title: '提示',
                            message: (type == 1 ? "设置审核通过" : "审核不通过") + "成功",
                            type: 'success'
                        });
                    } else {
                        self.$notify({
                            title: '提示',
                            message: data.msg,
                            type: 'error'
                        });
                    }
                    self.getData();

                });
            },

            resetForm2() {
                this.ruleForm2.type='1';
                this.ruleForm2.content='';
            },
            setRecommend(type,id){//冻结解冻用户
                var self=this;
                if(type!=0&&type!=1){
                    self.$notify({title: '提示',message: '传入类型不正确',type: 'warning'});
                    return;
                }
                var ids=new Array();
                if(id){
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }
                self.$confirm('确定要'+(type==1?"设置为推荐":"取消推荐")+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={type:type,ids:ids};
                    self.myajax("/shop/setRecommend",data,function(data){
                        var code=data.code;
                        if(code==2000){
                            self.$notify({title: '提示',message: (type==1?"设置为推荐":"取消推荐")+"成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();

                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            exportShop(id){//导出商户图片
                var self=this;
                var ids=new Array();
                if(id){
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }
                self.$confirm('确定要导出商户图片?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    window.location.href=self.$host+"/admin/shopTable/exportShop?sshopIds="+ids.join();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            detail(row) {
                var self = this;
                // self.ruleForm3.name = row.name;
                // self.ruleForm3.cityname = row.cityname;
                // self.ruleForm3.address = row.address;
                // self.ruleForm3.createTime = row.createTime == "" ? "" : new Date(row.createTime).format("yyyy-MM-dd hh:mm");
                // self.ruleForm3.shopLogo = row.shopLogo;
                // self.ruleForm3.shopPhone = row.shopPhone;
                // self.ruleForm3.detail = row.detail;
                // self.ruleForm3.realAddress = row.realAddress;
                // self.ruleForm3.agreementCode = row.agreementCode;
                // self.ruleForm3.shOpinion = row.shOpinion;
                // // $("#detail").html("");
                // // $("#detail").append(row.detail);
                // self.ruleForm3.cardNo = row.cardNo;
                // self.ruleForm3.responsibleName = row.responsibleName;
                // self.ruleForm3.responsiblePhone = row.responsiblePhone;
                // self.ruleForm3.area = row.area;
                // self.ruleForm3.avgComsump = row.avgComsump;
                // self.ruleForm3.shState = row.shState+"";
                // self.ruleForm3.approvalUserName = row.approvalUserName;
                // self.ruleForm3.isDisbaled = row.isDisbaled+"";
                // self.ruleForm3.collectionNum = row.collectionNum;
                // self.ruleForm3.starNum = row.starNum;
                // self.ruleForm3.txDiscountRate = row.txDiscountRate;
                // self.ruleForm3.isRecommend = (row.isRecommend==null?"0":row.isRecommend)+"";
                // self.ruleForm3.txDiscountRate = (row.txDiscountRate==null?"0":row.txDiscountRate)+"%";
                // self.ruleForm3.businessLicense = row.businessLicense;
                // self.ruleForm3.healthPermit = row.healthPermit;
                // self.ruleForm3.cardFace = row.cardFace;
                // self.ruleForm3.cardBack = row.cardBack;
                self.dialogFormVisibleDetail = true;

                // self.shState = row.shState+"";

                self.ruleForm3=row;

                $("img").css("max-width","100%");
            }
        }
    };
</script>
<style scoped>
    .input_card{
        width: 40%;
        min-height: 160px;
        margin-left: 5%;
        float: left;
    }
    .input_logo{
        width: 300px;
        height:220px;
    }
    .input_logo_two{
        max-width: 100%;
    }
    .input_edit {
        width: 200px;
        float: left;
        margin-right: 10px;
    }

    .cell {
        padding: 0 5px !important;
        overflow: auto;
    }
    img {
        max-width: 100%;
    }
</style>
